<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img :src="attachImageUrl(tempList.picture)">
      </div>
      <div class="album-info">
        <h2>简介:</h2>
        <span>
          {{tempList.introduction}}
        </span>
      </div>
    </div>
    <div class="album-content">
      <div class="album- title">
        <p>{{tempList.title}}</p>
      </div>
      <div class="songs-body">
        <album-content :staffsList="staffLists">
          <template slot="title">乐谱列表</template>
        </album-content>
        <comment :playId="staffListId" :type="1"></comment>
      </div>
    </div>
  </div>
</template>

<script>
import {mixin} from "@/mixins";
import {mapGetters} from "vuex";
import {listStaffDetail} from "@/api";
import AlbumContent from "../components/AlbumContent";
import Comment from "../components/Comment";
export default {
  name: "staff-list-alum",
  mixins:[mixin],
  components:{
    AlbumContent,
    Comment
  },
  data(){
    return {
      staffLists:[],//当前页面需要展示的歌曲列表
      staffListId:'',//前面传来的歌曲id
    }
  },
  computed:{
    ...mapGetters([
      'listOfStaffs',//当前播放列表
      'tempList',
    ])
  },
  created() {
    this.staffListId = this.$route.params.id;
    this.getStaffId()
  },
  methods:{
    //获取当前乐谱的歌曲列表
    getStaffId(){
      listStaffDetail(this.staffListId).then(res =>{
        console.log({res})
        this.staffLists.push(...res.data);
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../assets/css/song-list-album.scss";
</style>
